import React, { useEffect } from 'react';
import { Button, Col, Row, Statistic } from 'antd';
import * as echarts from 'echarts';
import service from '../../../api/index'
interface Props { }



function Home(props: Props) {
    var myChart: any = null;

    useEffect(() => {
        //发请求
        service.data.data_simpleData().then((res) => {
            var xAxisData = res.data.data.map((item: any) => {
                return item.x;
            })
            var seriesData = res.data.data.map((item: any) => {
                return item.val;
            })
            var paidata = res.data.data.map((item: any) => {
                return { value: item.val, name: item.x };
            })
            //绘图
            // drbw(xAxisData,seriesData);
            draw(paidata, xAxisData, seriesData);
        });
        //实例化echarts
        myChart = echarts.init(document.getElementById('charts') || document.body);
        //绘图

    }, [])

    // 绘图
    var draw = (paidata: any, xAxisData: any, seriesData: any) => {
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['饼图', '价格', '销量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '价格',
                    min: 0,
                    max: 250,
                    interval: 50,
                },
                {
                    type: 'value',
                    name: '销量',
                    min: 0,
                    max: 25,
                    interval: 5,
                }
            ],
            series: [
                // 柱状图
                {
                  name: '价格',
                  type: 'bar',
                  tooltip: {
                    valueFormatter: function (value: any) {
                      return value as number;
                    }
                  },
                  data: seriesData
                },

                // 折线图
                {
                    name: '销量',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value: any) {
                            return value as number;
                        }
                    },
                    data: [15, 23, 22.4, 21.9, 13.5, 14.8, 25]
                }
            ]
        });
    }
    //绘图
    var drbw = (xAxisData: any, seriesData: any) => {
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例' //标题
            },
            tooltip: {},
            xAxis: { //x轴的刻度数据及设置
                // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                data: xAxisData
            },
            yAxis: { //y周的刻度数据及设置

            },
            series: [ //图标中的数据系列
                {
                    name: '销量',
                    type: 'bar',//'bar' , 'line' , 'pie'
                    // data: [5, 20, 36, 10, 10, 20]
                    data: seriesData
                }
            ]
        });
    }
    return (
        <div>

            <Row gutter={16}>
                <Col span={12}>
                    <Statistic title="Active Users" value={112893} />
                </Col>
                <Col span={12}>
                    <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
                    <Button style={{ marginTop: 16 }} type="primary">
                        Recharge
                    </Button>
                </Col>
                <Col span={12}>
                    <Statistic title="Active Users" value={112893} loading />
                </Col>
            </Row>
            <div className='echarts'>
                <div id="charts" style={{ width: 1200, height: 500, margin: 10 }}  ></div>
            </div>
        </div>

    );
}

export default Home;